<template>
	<a-modal :confirm-loading="handing" :width="800" v-model:open="showForm" @ok="submit">
		<a-form ref="form" :model="formData" :rules="rules" :labelCol="{ span: 5 }" :wrapper-col="{ span: 16, offset: 1 }">
			<a-form-item name="title" label="课程标题">
				<a-input v-model:value="formData.title" placeholder="课程标题" />
			</a-form-item>
			<a-form-item name="origin_fee" label="原价(元)">
				<a-input-number v-model:value="formData.origin_fee" placeholder="展示给用户的原价" :min="1" step="10" addon-after="元" />
			</a-form-item>
			<a-form-item name="fee" label="人均(元)">
				<a-input-number v-model:value="formData.fee" placeholder="实际结算价格" :min="1" step="10" addon-after="元" />
			</a-form-item>
			<a-form-item name="cover" label="封面图">
        <avatar-uploader v-model:value="formData.cover" placeholder="封面图" />
			</a-form-item>
			<a-form-item name="intro" label="简介">
				<a-textarea v-model:value="formData.intro" placeholder="简介" />
			</a-form-item>
			<a-form-item name="content" label="详情">
				<editor v-model:value="formData.content" placeholder="详情" />
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script lang="ts">
import {page, form} from "@/mixins"

export default {
	mixins: [page, form],
	data() {
		return {
			showForm: false as boolean,
			formPath: 'dynamic',
			formData: {
				id: undefined,
				title: '',
				origin_fee: '',
				fee: '',
				cover: '',
				intro: '',
        content: ''
			},
			rules: {
			  title: [{ required: true, trigger: 'change', message: '课程标题不能为空' }],
			  origin_fee: [{ required: true, trigger: 'change', message: '请选择原价' }],
			  fee: [{ required: true, trigger: 'change', message: '请填写人均' }],
			  cover: [{ required: true, trigger: 'change', message: '请上传封面图片' }],
				intro: [{ required: true, trigger: 'change', message: '课程简介不能为空' }],
				content: [{ required: true, trigger: 'change', message: '课程内容不能为空' }]
			}
		}
	},
	methods: {
		add() {
			Object.assign(this.formData, {
				id: undefined,
				title: '',
        origin_fee: '',
				fee: '',
				cover: '',
				teacher_name: '',
				intro: '',
				teacher_id: 0
			})
			this.showForm = true;
		},
		edit(record: object) {
			Object.assign(this.formData, record);
			this.showForm = true
		},
		afterSubmit(data: object){
			this.$emit('change', data);
			this.showForm = false
		}
	}
}
</script>